<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="vue/vue.js"></script>
    <script src="jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="vue-box">
    <ul class="layui-nav" lay-filter="">
        <template v-if="currentUser.userId">
            <li class="layui-nav-item"><a>{{currentUser.username}}</a></li>
            <li class="layui-nav-item"><a @click="logout">注销</a></li>
        </template>
        <template v-else>
            <li class="layui-nav-item"><a @click="loginForm">登录</a></li>
            <li class="layui-nav-item"><a @click="registerForm">注册</a></li>
        </template>
    </ul>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs12">
                <div class="ba-box box">
                    <fieldset class="layui-elem-field">
                        <legend>所有贴吧</legend>
                        <div class="layui-field-box">
                            <button class="layui-btn layui-btn-lg" v-for="(item,index) in bas" :data-index="index"
                                    @click="changeBa">
                                {{item.baName}}
                            </button>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
        <template v-if="showType == 'tie'">
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="ties-box box">
                        <fieldset class="layui-elem-field">
                            <legend>{{ba.baName}}</legend>
                            <div class="layui-field-box">
                                <div class="tie-item" v-for="(item,index) in ties" >
                                    <a :data-index="index"
                                       @click="showFloors">
                                        {{item.title}}
                                    </a>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="publish-box box">
                        <form class="layui-form publish-form">
                            <div class="layui-form-item">
                                <input type="text" name="title" placeholder="请输入标题" class="layui-input publish-title">
                            </div>
                            <div class="layui-form-item">
                            <textarea id="tie-content" style="display: none;" class="publish-content"
                                      name="content"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" type="button" @click="publish">发布</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </template>
        <template v-if="showType == 'floor'">
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="floors-box box">
                        <fieldset class="layui-elem-field">
                            <legend>{{tie.title}}</legend>
                            <div class="layui-field-box">
                                <div class="floor-item" v-for="item in floors">
                                    <div class="floor-user">
                                        <div class="floor-user__avator"><img src="images/huaji.png"></div>
                                        <div class="floor-user__name">{{item.username}}</div>
                                    </div>
                                    <div class="floor-body">
                                        <div class="floor-body__content">{{item.content}}</div>
                                        <div class="floor-body__info">
                                            <span class="floor-info-no">{{item.floorNo}}楼</span>
                                            <span class="floor-info-date">{{item.date | formatDate}}</span>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="publish-box box">
                        <form class="layui-form reply">
                            <div class="layui-form-item">
                            <textarea id="floor-content" style="display: none;" class="reply-content"
                                      name="content"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" type="button" @click="reply">回复</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
<script src="layui/layui.js"></script>
<script src="js/index.js"></script>
</body>
</html>